Skip to content

Seed design system for OpenClaw Windows Hub - #962

Draft
karkarl wants to merge 9 commits into
openclaw:mainfrom
karkarl:karkarl-seed-design-system
Draft

Seed design system for OpenClaw Windows Hub#962
karkarl wants to merge 9 commits into
openclaw:mainfrom
karkarl:karkarl-seed-design-system

Conversation

@karkarl

@karkarl karkarl commented Jul 10, 2026

Copy link
Copy Markdown
Contributor

Seeds a design system under .agents/design/ for the OpenClaw Windows Hub (WinUI 3 tray app), named Windows Fluent UI for OpenClaw. No application code is changed — this only adds files under .agents/design/.

Built with Colophon

Authored and previewed with the Colophon Copilot plugin — an experimental design-system canvas that treats .agents/design/ as the source of truth and renders design.json + components.jsx live (and feeds them back to Copilot when it builds UI). The tokens here were seeded from the app's own WinUI/Fluent surfaces and refined in the canvas.

image image image

What's included

  • design.json — token source of truth: colors, typography, spacing, radii, shadows, brand metadata. Tokens are derived from the app's real Fluent/WinUI usage (SystemAccentColor, Card/Subtle fill colors, Segoe UI Variable, Cascadia Mono) via manual XAML/C# inspection (the CSS scanner finds 0 files in a XAML repo).
  • components.jsx — living component patterns rendered in the Design System canvas: Button, Field, Card, Badge, plus chat patterns (ChatBubble, ChatComposer, ChatThread) grounded in the native chat code.
  • principles.md — prose companion: voice, personality, and Fluent-first principles ("defer to Windows", one-accent, no hard-coded hex).

Chat components

  • ChatBubble — user (right, accent, no chrome) vs assistant (left, surface + 1px line, 36px avatar), muted timestamp footer; assistant footer adds usage string + inline copy button. Mirrors OpenClawChatTimeline metrics.
  • ChatComposer — GitHub-Copilot-style toolbar: Add(+) / model / reasoning pickers on the left, mic + accent Send on the right, using WinUI SubtleButton hover/pressed tokens.

Tokens of note

  • radii: added bubble (16px) matching the native chat bubble corner radius.
  • colors: added subtleHover / subtlePressed for subtle/transparent controls (Fluent SubtleFillColorSecondary/Tertiary).

Validation

  • All 8 canvas exports transpile and render through the extension's Babel (classic runtime) + new Function pipeline.
  • design.json validated as JSON.

Stacked work

A follow-up branch applies the ChatComposer pattern to the real app chat UI (stacked on this branch): karkarl#1.

Co-authored-by: Copilot App 223556219+Copilot@users.noreply.github.com

karkarl and others added 4 commits July 8, 2026 12:22
Add .agents/design/ (design.json, components.jsx, principles.md) with tokens derived from the WinUI 3/XAML surfaces. The app themes off Windows Fluent system resources, so color/type/radius tokens map to Fluent (SystemAccentColor, Segoe UI Variable, Cascadia Mono) rather than a bespoke palette. No application code changed.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Refine control padding to WinUI defaults (Button 11,5,11,6 with 100px
min-width; Field TextControlThemePadding 10,5,6,6, min-height 32; Card
Gallery padding 16,12) and add reusable chat components grounded in the
native timeline and composer: ChatBubble, ChatComposer, ChatThread.

Add a 'bubble' (16px) radius token mirroring OpenClawChatTimeline
CornerRadius and point ChatBubble at var(--radius-bubble).

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Distinguish user vs assistant bubbles and enrich the assistant footer to
match the native timeline (OpenClawChatTimeline):
- Add a 36x36 circular assistant avatar (subtle fill + 1px line border,
  top-aligned, 8px gap) left of the agent bubble; user bubbles show none,
  mirroring showUserAvatar=false. Sparkle glyph stands in for the app logo.
- Give every bubble a muted timestamp footer; assistant footer also shows
  the context-usage readout (ChatUsageFormatter's used/context (pct%)) with
  a subtle inline Copy affordance right of the usage text.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Mirror the GitHub Copilot composer layout: left cluster = Add, model
picker, reasoning-effort picker; right cluster = mic + Send. Only Send
carries the accent; every other control is subtle chrome.

Give the icon buttons and inline pickers WinUI SubtleButtonStyle
interaction states — SubtleFillColorSecondary on hover, the lighter
SubtleFillColorTertiary on press, glyph/label darkening to primary text,
120ms ease-out. Add subtleHover / subtlePressed tokens (Fluent subtle
fills) so no hex is hard-coded in the component.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
@clawsweeper clawsweeper Bot added rating: 🧂 unranked krab Not merge-ready due to missing proof or serious correctness/safety concerns. status: 📣 needs proof The PR needs real behavior proof before ClawSweeper can clear the contributor ask. P2 Normal priority bug or improvement with limited blast radius. merge-risk: 🚨 other 🚨 Merging this PR has meaningful risk outside the owned taxonomy. labels Jul 10, 2026
@clawsweeper

clawsweeper Bot commented Jul 10, 2026

Copy link
Copy Markdown

Codex review: needs real behavior proof before merge. Reviewed August 4, 2026, 5:07 PM ET / 21:07 UTC.

ClawSweeper review

What this changes

This PR adds 474 lines of non-shipping design tokens, static component examples, and design guidance under .agents/design/ for the Windows Hub tray app.

Merge readiness

Blocked until stronger real behavior proof is added - 14 items remain

Keep open. Current main does not contain this catalog, but the proposed agent-facing authority conflicts with the current Reactor-owned chat contract and lacks current-head validation and proof.

Priority: P2
Reviewed head: d03a4ffcda603e12fc6a75bfadf731dec6e21b55
Owner decision: Required. See Decision needed.

Review scores

Measure Result What it means
Overall readiness 🦪 silver shellfish (2/6) The idea has useful signal, but unresolved authority and parity defects plus outdated proof keep it below merge-ready quality.
Proof confidence 🦪 silver shellfish (2/6) Needs stronger real behavior proof before merge: The PR contains screenshots, but they predate the current components.jsonc migration; add redacted current-head parse/reference output and Light, Dark, and High Contrast gallery proof before merge. After adding proof, update the PR body; ClawSweeper should re-review automatically. If it does not, the PR author or someone with repository write access can comment @clawsweeper re-review.
Patch quality 🦪 silver shellfish (2/6) 5 actionable review findings remain.

Verification

Check Result Evidence
Real behavior Needs proof Needs stronger real behavior proof before merge: The PR contains screenshots, but they predate the current components.jsonc migration; add redacted current-head parse/reference output and Light, Dark, and High Contrast gallery proof before merge. After adding proof, update the PR body; ClawSweeper should re-review automatically. If it does not, the PR author or someone with repository write access can comment @clawsweeper re-review.
Evidence reviewed 5 items Reactor owns the shipped chat surface: The architecture ledger marks ReactorChatTimeline through OpenClawReactorChatRoot as authoritative for the production timeline and says the default ChatPage and ChatWindow route mounts the Reactor root directly.
Current native chat has behavior beyond static catalog examples: The Reactor root owns attachments, queued sends, read-aloud, voice state, tool-call visibility, settings, stop behavior, and queued-message cancellation, so a static ChatBubble/ChatComposer/ChatThread catalog must be explicitly partial and derived.
Retired catalog path remains in current source: Current main still documents the composer as following .agents/design/components.jsx, while this PR adds components.jsonc and no JSX catalog. The integration needs to update that reference.
Findings 5 actionable findings [P1] Make native UI behavior canonical
[P2] Mark static chat patterns as partial references
[P2] Update the retired JSX catalog reference
Security None None.

How this fits together

Windows Hub is a native WinUI tray application whose chat surface is now rendered by Reactor components using Fluent theme resources. The new catalog would guide designers and coding agents before they port a design into those shipping surfaces.

flowchart LR
  A[Native chat and WinUI code] --> B[Fluent resources and behavior]
  B --> C[Design catalog]
  C --> D[Agent and designer guidance]
  D --> E[Reactor and WinUI implementation]
  E --> F[Windows Hub users]
Loading

Decision needed

Question Recommendation
Should this repository own a Colophon-oriented design catalog as agent guidance, with native Reactor and WinUI behavior explicitly remaining canonical? Accept a derived catalog: Keep the catalog only as a tested, explicitly partial reference whose mappings defer to the shipping Reactor and WinUI owners.

Why: The PR adds a new contributor and agent authority surface rather than repairing existing runtime behavior; the repository must choose whether to support and maintain that surface.

Before merge

  • Add real behavior proof - Needs stronger real behavior proof before merge: The PR contains screenshots, but they predate the current components.jsonc migration; add redacted current-head parse/reference output and Light, Dark, and High Contrast gallery proof before merge. After adding proof, update the PR body; ClawSweeper should re-review automatically. If it does not, the PR author or someone with repository write access can comment @clawsweeper re-review.
  • Make native UI behavior canonical (P1) - The catalog calls itself the source of truth for design, but current production chat is Reactor-owned and uses native Fluent resources. Make the catalog explicitly derived from native behavior and resource mappings so future agents cannot treat it as a parallel authority.
  • Mark static chat patterns as partial references (P2) - The catalog presents chat patterns as shipping guidance, while the current Reactor root also owns attachments, queued-send cancellation, tool-call visibility, voice state, settings, and stop/read-aloud behavior. Link the canonical owners and state the omitted contract instead of implying full parity.
  • Update the retired JSX catalog reference (P2) - This PR introduces components.jsonc, but current composer documentation still points agents to .agents/design/components.jsx. Update that reference in the same PR so the repository does not document a catalog file that is absent after merge.
  • Remove em dashes from agent-facing guidance (P2) - The added catalog instructions use em dashes. Repository policy prohibits em dashes in agent-facing help, so replace them with commas, colons, or hyphens throughout the added design files.
  • Add repository-owned catalog validation (P2) - The new JSONC catalog is not part of the build or test graph, so a schema or component-reference break in the external canvas format can merge unnoticed. Add a focused repository-owned parse/reference smoke check before using this as shared guidance.
  • Resolve merge risk (P1) - If agents treat the catalog as the authoritative design source, its static values and incomplete chat patterns can drift from the shipping Reactor behavior, Fluent resource mappings, and accessibility states.
  • Resolve merge risk (P1) - The new JSONC catalog depends on an external canvas schema but has no repository-owned parse, reference, or rendering smoke check.
  • Resolve merge risk (P1) - Complete local PR-head object inspection was blocked by an unreachable promisor remote; no claim is made that the entire head tree was locally read.
  • Complete next step (P2) - A maintainer must first sponsor the repository-owned catalog boundary, and the contributor must supply current-head proof that automation cannot create on their behalf.
  • Improve patch quality - Make the catalog explicitly derived and partial, then repair the JSX reference and agent-facing copy.
  • Improve patch quality - Add a repository-owned JSONC parse/reference smoke check.
  • Improve patch quality - Post redacted current-head Light, Dark, and High Contrast catalog proof in the PR body.

Findings

  • [P1] Make native UI behavior canonical — .agents/design/design.json:6
  • [P2] Mark static chat patterns as partial references — .agents/design/components.jsonc:13-17
  • [P2] Update the retired JSX catalog reference — .agents/design/components.jsonc:1
Agent review details

Security

None.

Review metrics

Metric Value Why it matters
Catalog footprint 3 files affected, +474/-0 lines, 0 repository test lines The PR creates a sizable agent-facing contract without executable application changes or a local regression check.

Merge-risk options

Maintainer options:

  1. Make the catalog a derived, verified reference (recommended)
    Before merge, resolve the authority and parity findings, update the retired source reference, add local catalog validation, and attach current-head theme proof.
  2. Decline the Colophon catalog surface
    Pause or close the PR if maintainers do not want to own an external-canvas-specific guidance format in this repository.

Technical review

Best possible solution:

If maintainers sponsor a repository-owned catalog, make native Reactor and WinUI behavior canonical, label every catalog example as derived and partial, update the retired JSX reference, add a repository-owned smoke check, and post redacted current-head Light, Dark, and High Contrast proof.

Do we have a high-confidence way to reproduce the issue?

Not applicable. This is a non-shipping design-catalog proposal, so the relevant evidence is current-source contract and current-head catalog proof rather than a bug reproduction.

Is this the best way to solve the issue?

No. The proposed catalog must become a derived, explicitly partial reference to the current native contract, rather than an independent authority for design decisions.

Full review comments:

  • [P1] Make native UI behavior canonical — .agents/design/design.json:6
    The catalog calls itself the source of truth for design, but current production chat is Reactor-owned and uses native Fluent resources. Make the catalog explicitly derived from native behavior and resource mappings so future agents cannot treat it as a parallel authority.
    Confidence: 0.93
  • [P2] Mark static chat patterns as partial references — .agents/design/components.jsonc:13-17
    The catalog presents chat patterns as shipping guidance, while the current Reactor root also owns attachments, queued-send cancellation, tool-call visibility, voice state, settings, and stop/read-aloud behavior. Link the canonical owners and state the omitted contract instead of implying full parity.
    Confidence: 0.9
  • [P2] Update the retired JSX catalog reference — .agents/design/components.jsonc:1
    This PR introduces components.jsonc, but current composer documentation still points agents to .agents/design/components.jsx. Update that reference in the same PR so the repository does not document a catalog file that is absent after merge.
    Confidence: 0.96
  • [P2] Remove em dashes from agent-facing guidance — .agents/design/components.jsonc:1
    The added catalog instructions use em dashes. Repository policy prohibits em dashes in agent-facing help, so replace them with commas, colons, or hyphens throughout the added design files.
    Confidence: 0.98
  • [P2] Add repository-owned catalog validation — .agents/design/components.jsonc:1
    The new JSONC catalog is not part of the build or test graph, so a schema or component-reference break in the external canvas format can merge unnoticed. Add a focused repository-owned parse/reference smoke check before using this as shared guidance.
    Confidence: 0.9

Overall correctness: patch is incorrect
Overall confidence: 0.87

AGENTS.md: found and applied where relevant.

Codex review notes: model internal, reasoning high; reviewed against 6e225e4758e1.

Labels

Label justifications:

  • P2: This is a bounded contributor-guidance feature with normal priority, not a runtime outage or security incident.
  • merge-risk: 🚨 compatibility: The catalog can direct future changes away from the current native Reactor and Fluent behavior unless its authority and coverage limits are explicit.
  • rating: 🦪 silver shellfish: Overall readiness is 🦪 silver shellfish; proof is 🦪 silver shellfish and patch quality is 🦪 silver shellfish.
  • status: 📣 needs proof: The PR needs real behavior proof before ClawSweeper can clear the contributor ask. Needs stronger real behavior proof before merge: The PR contains screenshots, but they predate the current components.jsonc migration; add redacted current-head parse/reference output and Light, Dark, and High Contrast gallery proof before merge. After adding proof, update the PR body; ClawSweeper should re-review automatically. If it does not, the PR author or someone with repository write access can comment @clawsweeper re-review.
  • proof: 📸 screenshot: Contributor real behavior proof includes screenshot evidence. The PR contains screenshots, but they predate the current components.jsonc migration; add redacted current-head parse/reference output and Light, Dark, and High Contrast gallery proof before merge.

Evidence

What I checked:

  • Reactor owns the shipped chat surface: The architecture ledger marks ReactorChatTimeline through OpenClawReactorChatRoot as authoritative for the production timeline and says the default ChatPage and ChatWindow route mounts the Reactor root directly. (docs/ARCHITECTURE.md:135, 6e225e4758e1)
  • Current native chat has behavior beyond static catalog examples: The Reactor root owns attachments, queued sends, read-aloud, voice state, tool-call visibility, settings, stop behavior, and queued-message cancellation, so a static ChatBubble/ChatComposer/ChatThread catalog must be explicitly partial and derived. (src/OpenClaw.Tray.WinUI/Chat/OpenClawReactorChatRoot.cs:70, 6e225e4758e1)
  • Retired catalog path remains in current source: Current main still documents the composer as following .agents/design/components.jsx, while this PR adds components.jsonc and no JSX catalog. The integration needs to update that reference. (src/OpenClaw.Tray.WinUI/Chat/OpenClawComposer.cs:25, 6e225e4758e1)
  • Recent chat ownership history: Current chat migration history identifies Karen as the contributor for the Reactor migration, with adjacent lifecycle work by Caleb Eden. (src/OpenClaw.Tray.WinUI/Chat/OpenClawReactorChatRoot.cs:38, 9acafa606a4d)
  • Current-head inspection limitation: The local partial clone could read current main but could not materialize the complete PR-head object because its promisor remote was unreachable; review of PR-head details relies on the supplied GitHub patch, commits, body, and discussion. (d03a4ffcda60)

Likely related people:

  • karkarl: Karen authored the current-main Reactor chat migration and also owns the proposed catalog direction. (role: recent native-chat contributor; confidence: high; commits: 9acafa606a4d; files: src/OpenClaw.Tray.WinUI/Chat/OpenClawReactorChatRoot.cs, src/OpenClaw.Tray.WinUI/Chat/ReactorChatTimeline.cs)
  • Caleb Eden: Caleb's recent lifecycle-command work is in the current native chat history and informs the runtime contract the catalog must not replace. (role: recent adjacent contributor; confidence: medium; commits: 2fb1da26c175, 282e583e7257; files: src/OpenClaw.Tray.WinUI/Chat/OpenClawComposer.cs, src/OpenClaw.Tray.WinUI/Chat/OpenClawReactorChatRoot.cs)
  • shanselman: The collaborator review explicitly identified the native-canonical authority boundary, and adjacent chat history includes a current-main contribution. (role: reviewer and adjacent contributor; confidence: medium; commits: 277936553135; files: src/OpenClaw.Tray.WinUI/Chat/OpenClawComposer.cs)

Rating scale

Score Internal tier Crab rank Meaning
6/6 S 🦀 challenger crab Exceptional readiness
5/6 A 🦞 diamond lobster Very strong readiness
4/6 B 🐚 platinum hermit Good normal PR; ordinary maintainer review
3/6 C 🦐 gold shrimp Useful, but confidence is limited
2/6 D 🦪 silver shellfish Proof or implementation needs work
1/6 F 🧂 unranked krab Not merge-ready
N/A NA 🌊 off-meta tidepool Rating does not apply

Overall follows the weaker of proof and patch quality.
Shiny media proof means a screenshot, video, or linked artifact directly shows the changed behavior. Runtime, network, CSP, and security claims still need visible diagnostics.

Workflow

  • ClawSweeper keeps one durable marker-backed review comment per issue or PR.
  • Re-runs edit this comment so the latest verdict, findings, and automation markers stay together instead of adding duplicate bot comments.
  • A fresh review can be triggered by eligible @clawsweeper re-review comments, exact-item GitHub events, scheduled/background review runs, or manual workflow dispatch.
  • PR/issue authors and users with repository write access can comment @clawsweeper re-review or @clawsweeper re-run on an open PR or issue to request a fresh review only.
  • Maintainers can also comment @clawsweeper review to request a fresh review only.
  • Fresh-review commands do not start repair, autofix, rebase, CI repair, or automerge.
  • Maintainer-only repair and merge flows require explicit commands such as @clawsweeper autofix, @clawsweeper automerge, @clawsweeper fix ci, or @clawsweeper address review.
  • Maintainers can comment @clawsweeper explain to ask for more context, or @clawsweeper stop to stop active automation.

History

Review history (27 earlier review cycles; latest 8 shown)
  • reviewed 2026-08-03T08:00:31.735Z sha d03a4ff :: needs real behavior proof before merge. :: [P1] Keep native UI behavior canonical | [P2] Remove obsolete JSX catalog references | [P2] Mark chat patterns as partial references | [P2] Replace em dashes in agent-facing catalog copy | [P2] Add a repository-owned catalog smoke check
  • reviewed 2026-08-03T12:51:40.343Z sha d03a4ff :: needs real behavior proof before merge. :: [P1] Make native UI behavior canonical | [P2] Update obsolete JSX catalog references | [P2] Mark chat patterns as partial references | [P2] Replace em dashes in agent-facing catalog copy | [P2] Add a repository-owned catalog smoke check
  • reviewed 2026-08-03T14:56:07.816Z sha d03a4ff :: needs real behavior proof before merge. :: [P1] Keep observed native behavior canonical | [P2] Replace retired JSX catalog references | [P2] Label static chat examples as partial | [P2] Remove em dashes from agent-facing guidance | [P2] Add repository-owned catalog verification
  • reviewed 2026-08-03T21:16:45.482Z sha d03a4ff :: needs real behavior proof before merge. :: [P1] Keep native UI behavior canonical | [P2] Mark the chat catalog as partial | [P2] Remove em dashes from agent-facing catalog copy | [P2] Add repository-owned catalog verification
  • reviewed 2026-08-04T03:15:21.528Z sha d03a4ff :: needs real behavior proof before merge. :: [P1] Keep native WinUI and Reactor behavior canonical | [P2] Replace retired JSX catalog references | [P2] Label chat catalog patterns as partial | [P2] Remove em dashes from agent-facing guidance | [P2] Add repository-owned catalog verification
  • reviewed 2026-08-04T11:09:25.783Z sha d03a4ff :: needs real behavior proof before merge. :: [P1] Keep native UI behavior canonical | [P2] Update retired JSX catalog references | [P2] State that chat catalog examples are partial | [P2] Remove em dashes from agent-facing guidance | [P2] Add repository-owned catalog verification
  • reviewed 2026-08-04T13:10:13.559Z sha d03a4ff :: needs real behavior proof before merge. :: [P1] Keep native UI behavior canonical | [P2] Update retired JSX catalog references | [P2] Mark chat patterns as partial references | [P2] Remove em dashes from agent-facing guidance | [P2] Add repository-owned catalog verification
  • reviewed 2026-08-04T16:02:13.838Z sha d03a4ff :: needs real behavior proof before merge. :: [P1] Keep native UI behavior canonical | [P2] Update retired JSX catalog references | [P2] Mark chat examples as partial references | [P2] Remove em dashes from agent-facing guidance | [P2] Add a repository-owned catalog smoke check

@karkarl
karkarl marked this pull request as draft July 10, 2026 19:46
karkarl and others added 2 commits July 10, 2026 12:58
Rename the design system's brand from the product name (OpenClaw Windows
Hub) to Windows Fluent UI for OpenClaw, reflecting its basis in Windows
Fluent design conventions. Clarify that it is the design system for the
OpenClaw Windows Hub app in design.json and principles.md.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
The CSS/JSX scanner finds no files in this XAML repo; every token was
derived by manual inspection of the WinUI 3 XAML and C# surfaces. Update
meta.updatedBy and meta.note to reflect that accurately.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
@clawsweeper clawsweeper Bot added rating: 🧂 unranked krab Not merge-ready due to missing proof or serious correctness/safety concerns. status: 📣 needs proof The PR needs real behavior proof before ClawSweeper can clear the contributor ask. merge-risk: 🚨 other 🚨 Merging this PR has meaningful risk outside the owned taxonomy. and removed rating: 🧂 unranked krab Not merge-ready due to missing proof or serious correctness/safety concerns. status: 📣 needs proof The PR needs real behavior proof before ClawSweeper can clear the contributor ask. merge-risk: 🚨 other 🚨 Merging this PR has meaningful risk outside the owned taxonomy. labels Jul 10, 2026
@karkarl
karkarl marked this pull request as ready for review July 10, 2026 20:23
@clawsweeper clawsweeper Bot added proof: 📸 screenshot Contributor real behavior proof includes screenshot evidence. rating: 🦐 gold shrimp Decent PR readiness signal, but merge confidence is limited. and removed rating: 🧂 unranked krab Not merge-ready due to missing proof or serious correctness/safety concerns. labels Jul 10, 2026
@shanselman

Copy link
Copy Markdown
Collaborator

🤖 Copilot assistant note, posted on Scott's behalf — this is not Scott writing personally.

I was initially confused about the intended authority boundary here. I inferred that the JSX was a non-shipping visual reference derived from the native WinUI app, but the current wording sends mixed signals:

  • design.json says the tokens were derived from the repository's native XAML/C# surfaces.
  • principles.md calls this “the design system” and says designers write here while developers and Copilot read it.
  • The PR description calls .agents/design/ a “source of truth.”

Because this is a native WinUI application, I suggest making the boundary explicit for future agents and contributors:

Native WinUI XAML/C# and observed product behavior are canonical. The JSX and design files are non-shipping, derived visual examples for Colophon and Copilot. When they differ, native wins.

It would also help to qualify or remove “source of truth,” and name who is responsible for synchronizing these derived examples after native UI changes. That clarity would have prevented my initial misreading and should keep future bots from treating the JSX as a parallel product authority.

Design files are the source of truth for design (framework-agnostic);
components.jsx is design intent for the canvas preview, not shipping code.
Record how the design ships via authority.port targets:
- default: Native WinUI 3 / C# (Windows Fluent), ported via win-dev-skills
- chat surface (ChatBubble, ChatComposer, ChatThread): Reactor
  (microsoft-ui-reactor); no dedicated porting agent yet (WIP)

Updates meta.note, components.jsx header, and principles.md to match.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
@karkarl

karkarl commented Jul 16, 2026

Copy link
Copy Markdown
Contributor Author

Pushed an update that reworks the authority framing in response to @scott's note about .agents/design/ being described as "the source of truth".

The seed now uses Colophon's new port-target model instead of a flat source-of-truth claim:

  • The design files stay the source of truth for design (tokens, component intent, principles) and are framework-agnostic. components.jsx is design intent for the canvas preview — explicitly not shipping code.
  • How a design ships is now recorded per-surface in design.json under authority:
    • Default: ships as Native WinUI 3 / C#, ported via win-dev-skills.
    • Chat surface (ChatBubble, ChatComposer, ChatThread): ships via Reactor (no dedicated porting agent yet — WIP).

So the boundary Scott asked for is now explicit: native XAML/C# (and Reactor for chat) is what ships; the JSX/design files are the upstream design intent that gets ported into it, and the syncSource/helperAgent name how and who. components.jsx and principles.md say the same thing in prose.

@karkarl
karkarl marked this pull request as draft July 16, 2026 20:53
@shanselman

Copy link
Copy Markdown
Collaborator

GitHub Copilot maintainer-assistant review — this is automated feedback, not a comment written personally by Scott.

Reviewed head: ed110a1c21c6065de3398f84d88fcdda4b2429e5

This should remain draft. The design-system idea is useful, but the current artifacts are not yet safe as authoritative guidance for a native WinUI app.

The main issues from the paired review:

  1. Theme/high-contrast contract: design.json contains fixed light-theme hex/rgba values while the shipping app relies on semantic ThemeResource/system brushes. Please either model Light/Dark/HighContrast variants or mark every color as preview-only and map it to the WinUI resource key agents must use. Raw preview hex must not become implementation guidance.
  2. Native remains canonical: the repository’s native WinUI behavior is the source of truth. JSX/catalog artifacts should be described as derived visual examples, not a parallel upstream authority. Please revise the authority block and principles accordingly, and name an owner/sync process for keeping examples aligned.
  3. Component parity: the catalog composer omits shipping controls/state such as channel/session routing, speaker mute, send/stop behavior, pending attachments/queue state, and additional action slots. The assistant footer also omits Read Aloud and its state. Either represent the complete shipping contract or label these examples explicitly partial with links to the canonical native owners.
  4. Proof/validation: add current-head gallery proof for every exported component, including Light, Dark, and High Contrast behavior where applicable. Add a schema/parse/render smoke check for .agents/design/* so future drift is caught automatically.

Recommended framing: keep native XAML/C# behavior canonical; use this catalog to explain visual intent and reusable patterns, with semantic resource mappings and explicit coverage limits. That would preserve the value of the design artifacts without teaching future agents to hard-code colors or omit native functionality.

karkarl and others added 2 commits July 20, 2026 12:18
The seed adopted the port-target authority model, but the latest colophon
validator now requires more once a port is set. Add the missing pieces so
design.json passes cleanly (0 errors / 0 warnings):

- authority.owner + authority.syncProcess (required when a port exists)
- per-color `resource` (WinUI Fluent ThemeResource brush keys) so agents bind
  system brushes instead of the preview-only hex
- per-color `themes` (dark + highContrast) for dark/high-contrast previews,
  matching the brand's stated "never hard-code hex that breaks in dark or
  high-contrast" principle

Keeps the existing port authoritySource (Native WinUI 3 / Windows Fluent),
win-dev-skills syncSource/helperAgent, and the chat -> Reactor portOverride.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Colophon replaced the pseudocode-React components.jsx format with a structured,
framework-agnostic components.jsonc element tree (rendered by a pure JSON->DOM
interpreter, no React/Babel). Port the seed's components over faithfully:

- Button, Field, Card, Badge, ChatBubble, ChatComposer, ChatThread, ExampleScreen
  translated to the element-tree schema at their rest state, keeping the ds-* classes,
  CSS-variable styling, WinUI-derived metrics, and SVG glyphs (send/mic/add/copy/chevron/
  sparkle) intact. ComposerPicker factored out as a reusable component.
- Interactive hover/press JS (not expressible in the static scene graph) is dropped;
  the preview shows the documented rest state.

Validates clean (0 errors / 0 warnings); all prototypes.jsonc component references
resolve.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
@clawsweeper clawsweeper Bot added rating: 🦪 silver shellfish Thin PR readiness signal; proof, validation, or implementation needs work. merge-risk: 🚨 compatibility 🚨 Merging this PR could break existing users, config, migrations, defaults, or upgrades. and removed rating: 🦐 gold shrimp Decent PR readiness signal, but merge confidence is limited. merge-risk: 🚨 other 🚨 Merging this PR has meaningful risk outside the owned taxonomy. labels Jul 30, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

merge-risk: 🚨 compatibility 🚨 Merging this PR could break existing users, config, migrations, defaults, or upgrades. P2 Normal priority bug or improvement with limited blast radius. proof: 📸 screenshot Contributor real behavior proof includes screenshot evidence. rating: 🦪 silver shellfish Thin PR readiness signal; proof, validation, or implementation needs work. status: 📣 needs proof The PR needs real behavior proof before ClawSweeper can clear the contributor ask.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants